<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
        <el-form-item label="工号" prop="jobNumber">
          <el-input v-model="queryParams.jobNumber" clearable @keyup.enter.native="handleQuery" style="width:100px" />
        </el-form-item>
        <el-form-item label="姓名" prop="fullName">
          <el-input v-model="queryParams.fullName" clearable @keyup.enter.native="handleQuery" style="width:100px" />
        </el-form-item>
        <el-form-item label="部门" prop="deptid">
          <treeselect :options="deptOptions" :show-count="true" style="width:260px" placeholder="请选择归属部门"
            @input="treeSelectInput" @select="treeSelectChange" />
        </el-form-item>
        <el-form-item label="岗位" prop="position">
          <el-input v-model="queryParams.position" clearable @keyup.enter.native="handleQuery" style="width:100px" />
        </el-form-item>
        <el-form-item label="是否住宿" prop="accommodation">
          <el-select v-model="queryParams.accommodation" placeholder="请选择" style="width:100px">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="福建籍管理员" prop="fujianmanage" label-width="100px">
          <el-select v-model="queryParams.fujianmanage" placeholder="请选择" style="width:100px">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="delFlag">
          <el-select v-model="queryParams.delFlag" placeholder="请选择" style="width:100px">
            <el-option label="在职" value="0"></el-option>
            <el-option label="离职" value="1"></el-option>
            <el-option label="全部" value="3"></el-option>
            <el-option label="删除" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button icon="el-icon-search" size="mini" @click="advancedsearchOpen = true">高级搜索</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['business:outsource:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['business:outsource:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['business:outsource:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
          v-hasPermi="['system:outsource:import']">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['business:outsource:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="handleAssign" :disabled="multiple"
          v-hasPermi="['business:outsource:assign']">提交分配宿舍</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="employeeList" @selection-change="handleSelectionChange" border @sort-change="handleSortChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="工号" align="center" prop="jobNumber" />
      <el-table-column label="姓名" align="center" prop="fullName" />
      <el-table-column label="身份证" align="center" prop="idNumber" />
      <el-table-column label="性别" align="center" prop="gender" />
      <el-table-column label="部门" align="center" prop="department" />
      <el-table-column label="岗位" align="center" prop="position" />
      <el-table-column label="是否住宿" align="center">
        <template slot-scope="scope">
          <span :style="getAccommodationStyle(scope.row.accommodation)">{{ scope.row.accommodation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请状态" align="center" prop="allocated">
        <template slot-scope="scope">
          <el-tag :type="scope.row.allocated === '驳回' ? 'danger' : 'success'" disable-transitions>{{ scope.row.allocated
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="房间号" align="center" prop="beddetail" />
      <el-table-column label="创建日期" align="center" prop="createTime" sortable>
        <template slot-scope="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="更新日期" align="center" prop="updateTime" sortable>
        <template slot-scope="scope">
          {{ formatDate(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="入职日期" align="center" prop="entryDate" sortable />
      <el-table-column label="离职日期" align="center" prop="departureDate" sortable />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160px" fixed="right">
        <template slot-scope="scope">

          <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['business:outsource:remove']">删除</el-button> -->
          <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>

          <el-dropdown>
            <span class="el-dropdown-link" style="color:#1890ff;">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                  v-hasPermi="['business:outsource:edit']">修改</el-button></el-dropdown-item>
              <el-dropdown-item> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                  v-hasPermi="['business:outsource:remove']">删除</el-button></el-dropdown-item>
              <el-dropdown-item> <el-button size="mini" type="text" icon="el-icon-view" v-if="scope.row.pdfurl != null"
                  @click="onPreview(scope.row)">预览</el-button></el-dropdown-item>
              <el-dropdown-item> <el-button size="mini" type="text" icon="el-icon-download"
                  @click="handleExportpdf(scope.row)" v-if="scope.row.pdfurl != null"
                  v-hasPermi="['business:outsource:export']">导出</el-button></el-dropdown-item>
              <el-dropdown-item> <el-button size="mini" type="text" icon="el-icon-refresh"
                  @click="handleReadd(scope.row)">重新生成</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改员工对话框 -->
    <div v-if="open">
      <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="130px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基础信息" name="first">
              <div class="base-info-box" style="width: 100%">
                <div style="float: left; width: calc(100% - 290px);">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="姓名" prop="fullName">
                        <el-input v-model="form.fullName" placeholder="请输入姓名" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="form.gender">
                          <el-radio label="男">男</el-radio>
                          <el-radio label="女">女</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="年龄" prop="age">
                        <el-input-number v-model="form.age" placeholder="请输入年龄" disabled />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="民族" prop="ethnicity">
                        <el-select v-model="form.ethnicity" placeholder="请选择">
                          <el-option v-for="item in optionsEthnicity" :key="item.value" :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="学历" prop="education">
                        <el-select v-model="form.education" placeholder="请选择">
                          <el-option label="初中" value="初中"></el-option>
                          <el-option label="中专" value="中专"></el-option>
                          <el-option label="高中" value="高中"></el-option>
                          <el-option label="专科" value="专科"></el-option>
                          <el-option label="本科" value="本科"></el-option>
                          <el-option label="研究生" value="研究生"></el-option>
                          <el-option label="博士" value="博士"></el-option>
                          <el-option label="其他" value="其他"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="专业" prop="major">
                        <el-input v-model="form.major" placeholder="请输入专业" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div style="float: left; width: 290px">
                  <el-form-item label="照片" prop="img">
                    <userAvatar :user="form" @success="uoloadSuccess" />
                  </el-form-item>
                </div>
              </div>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证号码" prop="idNumber">
                    <el-input v-model="form.idNumber" placeholder="请输入身份证号码" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话" prop="contactNumber">
                    <el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="实际居住地" prop="residentialAddress">
                    <el-input v-model="form.residentialAddress" placeholder="请输入实际居住地" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证家庭地址" prop="homeAddress">
                    <el-input v-model="form.homeAddress" placeholder="请输入身份证家庭地址" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="紧急联系人" prop="emergencyContactPerson">
                    <el-input v-model="form.emergencyContactPerson" placeholder="请输入紧急联系人" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="紧急联系电话" prop="emergencyContactNumber">
                    <el-input v-model="form.emergencyContactNumber" placeholder="请输入紧急联系电话" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="是否住宿" prop="accommodation">
                    <el-radio-group v-model="form.accommodation">
                      <el-radio label="是">是</el-radio>
                      <el-radio label="否">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否包吃" prop="freeMeal">
                    <el-radio-group v-model="form.freeMeal">
                      <el-radio label="不包吃">不包吃</el-radio>
                      <el-radio label="包吃">包吃</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="职务信息" name="second">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="工号" prop="jobNumber">
                    <el-input v-model="form.jobNumber" placeholder="请输入工号" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="技术职称" prop="technicalTitle">
                    <el-input v-model="form.technicalTitle" placeholder="请输入技术职称" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入职时间" prop="entryDate">
                    <el-date-picker clearable v-model="form.entryDate" type="date" value-format="yyyy-MM-dd"
                      placeholder="请选择入职时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="岗位" prop="position">
                    <el-input v-model="form.position" placeholder="请输入" />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="岗位变动情况" prop="jobchange">
                    <el-input v-model="form.jobchange" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="二次入职的情况" prop="secondemployment">
                    <el-input v-model="form.secondemployment" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="职务层级" prop="positionLevel">
                    <el-input v-model="form.positionLevel" placeholder="请输入职务层级" />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="部门" prop="department" style="height: 300px">
                    <treeselect v-model="form.deptid" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"
                      @select="DRHA_EFaultModeTree_handleSelect" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="福建籍管理人员" prop="fujianmanage">
                    <el-radio-group v-model="form.fujianmanage">
                      <el-radio label="是">是</el-radio>
                      <el-radio label="否">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="保险信息" name="third">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="是否缴纳农村医疗保险" prop="ruralMedicalInsurance" label-width="200px">
                    <el-radio-group v-model="form.ruralMedicalInsurance">
                      <el-radio label="是">是</el-radio>
                      <el-radio label="否">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否签订放弃五险承诺书" prop="waiveSocialInsurance" label-width="200px">
                    <el-radio-group v-model="form.waiveSocialInsurance">
                      <el-radio label="是">是</el-radio>
                      <el-radio label="否">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="公积金缴纳时间" prop="housingFundStartDate">
                    <el-date-picker clearable v-model="form.housingFundStartDate" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择公积金缴纳时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="太平洋保险" prop="insurancePacific">
                    <el-select v-model="form.insurancePacific" placeholder="请选择">
                      <el-option label="" value=""></el-option>
                      <el-option label="太平洋" value="太平洋"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="中国人保保险" prop="insuranceCpic">
                    <el-select v-model="form.insuranceCpic" placeholder="请选择">
                      <el-option label="" value=""></el-option>
                      <el-option label="中国人保" value="中国人保"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="中国人寿保险" prop="insuranceChinalife">
                    <el-select v-model="form.insuranceChinalife" placeholder="请选择">
                      <el-option label="" value=""></el-option>
                      <el-option label="中国人寿" value="中国人寿"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="五险" prop="socialInsurance">
                    <el-select v-model="form.socialInsurance" placeholder="请选择">
                      <el-option label="" value=""></el-option>
                      <el-option label="五险" value="五险"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="参保时间" prop="insuranceStartDate">
                    <el-date-picker clearable v-model="form.insuranceStartDate" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择参保时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="退保时间" prop="insuranceEndDate">
                    <el-date-picker clearable v-model="form.insuranceEndDate" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择退保时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="合同信息" name="fourth">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="首次签订到期时间" prop="firstContractExpiryDate">
                    <el-date-picker clearable v-model="form.firstContractExpiryDate" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择首次签订到期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="二次签订到期时间" prop="secondContractExpiryDate">
                    <el-date-picker clearable v-model="form.secondContractExpiryDate" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择二次签订到期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="三次签订到期时间" prop="thirdContractExpiryDate">
                    <el-date-picker clearable v-model="form.thirdContractExpiryDate" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择三次签订到期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="四次签订到期时间" prop="fourthContractExpiryDate">
                    <el-date-picker clearable v-model="form.fourthContractExpiryDate" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择四次签订到期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="五次签订到期时间" prop="fifthContractExpiryDate">
                    <el-date-picker clearable v-model="form.fifthContractExpiryDate" type="date"
                      value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择五次签订到期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row> </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="合同签订情况备注" prop="contractRemarks" style="width: 350px">
                    <el-input v-model="form.contractRemarks" type="textarea" :rows="5" placeholder="请输入合同签订情况备注" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="薪酬信息" name="five">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="职级" prop="employeeRank">
                    <el-input v-model="form.employeeRank" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="职级工资" prop="rankSalary">
                    <el-input-number v-model="form.rankSalary" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="绩效档位" prop="performanceLevel">
                    <el-input v-model="form.performanceLevel" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="绩效金额" prop="performanceAmount">
                    <el-input-number v-model="form.performanceAmount" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="月押金额" prop="monthlyRent">
                    <el-input-number v-model="form.monthlyRent" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="技能工资" prop="skillSalary">
                    <el-input-number v-model="form.skillSalary" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row> <el-col :span="12">
                  <el-form-item label="个税补贴" prop="taxSubsidy">
                    <el-input-number v-model="form.taxSubsidy" placeholder="请输入" />
                  </el-form-item>
                </el-col></el-row>

            </el-tab-pane>
            <el-tab-pane label="离职信息" name="six">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="离职时间" prop="departureDate">
                    <el-date-picker clearable v-model="form.departureDate" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="请选择离职时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="离职情况" prop="departureStatus">
                    <!-- <el-select v-model="form.departureStatus" placeholder="请选择">
                      <el-option label="正常离职" value="正常离职"></el-option>
                      <el-option label="自离" value="自离"></el-option>
                      <el-option label="退休" value="退休"></el-option>
                      <el-option label="解除合同" value="解除合同"></el-option>
                    </el-select> -->
                    <el-autocomplete class="inline-input" v-model="form.departureStatus" :fetch-suggestions="departureStatusquerySearch"
                      placeholder="请输入内容"></el-autocomplete>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="离职原因" prop="departureReason" style="width: 350px">
                    <el-autocomplete class="inline-input" v-model="form.departureReason" :fetch-suggestions="querySearch"
                      placeholder="请输入内容"></el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="状态" prop="delFlag">
                    <el-select v-model="form.delFlag" placeholder="请选择">
                      <el-option label="在职" value="0"></el-option>
                      <el-option label="离职" value="1"></el-option>
                      <el-option label="删除" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>

            <el-tab-pane label="备注" name="seven">
              <el-row>
                <el-col :span="20">
                  <el-form-item label="无犯罪记录证明" prop="crime">
                    <el-input v-model="form.crime" type="textarea" :rows="5" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="备注" prop="remarks">
                    <el-input v-model="form.remarks" type="textarea" :rows="5" placeholder="请输入备注" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!--分派宿舍对话框 -->
    <el-dialog :title="assigntitle" :visible.sync="assignopen" width="1000px" append-to-body>
      <el-form ref="assignform" :model="assignform" label-width="130px">
        <el-row>


          <el-cascader-panel v-model="assignform.bedIds" :props="props" :options="options"></el-cascader-panel>


        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="assignbuttonLoading" type="primary" @click="assignsubmitForm">确 定</el-button>
        <el-button @click="assigncancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 数据导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!-- <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div> -->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
            @click="importTemplate">下载模板</el-link> -->
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="员工信息详情" :visible.sync="detailopen" width="1300px" :key="Math.random()" append-to-body>
      <detail :rowData="dynamicData"></detail>
    </el-dialog>
    <!--高级搜索 -->
    <el-drawer title="高级搜索" :visible.sync="advancedsearchOpen" direction="ltr" custom-class="demo-drawer" ref="drawer"
      size="300">
      <div class="demo-drawer__content">
        <el-form :model="queryParams">
          <el-form-item label="身份证" prop="idNumber">
            <el-input v-model="queryParams.idNumber" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="是否包吃" prop="freeMeal">
            <el-select v-model="queryParams.freeMeal" placeholder="请选择">
              <el-option label="不包吃" value="不包吃"></el-option>
              <el-option label="包吃" value="包吃"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入职时间" prop="entryDateArray">
            <el-date-picker v-model="queryParams.entryDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="职务层级" prop="positionLevel">
            <el-input v-model="queryParams.positionLevel" placeholder="请输入职务层级" />
          </el-form-item>
          <el-form-item label="是否缴纳农村医疗保险" prop="ruralMedicalInsurance">
            <el-radio-group v-model="queryParams.ruralMedicalInsurance">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否签订放弃五险承诺书" prop="waiveSocialInsurance">
            <el-radio-group v-model="queryParams.waiveSocialInsurance">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="公积金缴纳时间" prop="housingFundStartDateArray">
            <el-date-picker v-model="queryParams.housingFundStartDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="太平洋保险" prop="insurancePacific">
            <el-input v-model="queryParams.insurancePacific" placeholder="请输入太平洋保险" />
          </el-form-item>
          <el-form-item label="中国人保保险" prop="insuranceCpic">
            <el-input v-model="queryParams.insuranceCpic" placeholder="请输入中国人保保险" />
          </el-form-item>
          <el-form-item label="中国人寿保险" prop="insuranceChinalife">
            <el-input v-model="queryParams.insuranceChinalife" placeholder="请输入中国人寿保险" />
          </el-form-item>
          <el-form-item label="五险" prop="socialInsurance">
            <el-radio-group v-model="queryParams.socialInsurance">
              <el-radio label="是">是</el-radio>
              <el-radio label="否">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="参保时间" prop="insuranceStartDateArray">
            <el-date-picker v-model="queryParams.insuranceStartDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="退保时间" prop="insuranceEndDateArray">
            <el-date-picker v-model="queryParams.insuranceEndDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="首次签订到期时间" prop="firstContractExpiryDateArray">
            <el-date-picker v-model="queryParams.firstContractExpiryDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="二次签订到期时间" prop="secondContractExpiryDateArray">
            <el-date-picker v-model="queryParams.secondContractExpiryDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="三次签订到期时间" prop="thirdContractExpiryDateArray">
            <el-date-picker v-model="queryParams.thirdContractExpiryDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="四次签订到期时间" prop="fourthContractExpiryDateArray">
            <el-date-picker v-model="queryParams.fourthContractExpiryDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="五次签订到期时间" prop="fifthContractExpiryDateArray">
            <el-date-picker v-model="queryParams.fifthContractExpiryDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="离职时间" prop="departureDateArray">
            <el-date-picker v-model="queryParams.departureDateArray" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="离职情况" prop="departureStatus">
            <el-input v-model="queryParams.departureStatus" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="$refs.drawer.closeDrawer()">取 消</el-button>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
  
<script>
import { listEmployee, getEmployee, delEmployee, addEmployee, updateEmployee, reCreatPdf, allocated } from "@/api/business/employee";
import { getbedtree, assignDormitory } from "@/api/business/dormitory";
import {
  getUser,
  deptTreeSelect,
} from "@/api/system/user";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Detail from "@/views/business/employee/detail"
import userAvatar from "../employee/avatar";
export default {
  name: "outEmployee",

  components: { Treeselect, Detail, userAvatar },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 员工表格数据
      employeeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        jobNumber: undefined,
        fullName: undefined,
        department: undefined,
        position: undefined,
        delFlag: '0',
        outsource: "是",
        accommodation: undefined,
        fujianmanage: undefined,
        position: undefined,
        entryDateArray: [],
        housingFundStartDateArray: [],
        insuranceStartDateArray: [],
        insuranceEndDateArray: [],
        firstContractExpiryDateArray: [],
        secondContractExpiryDateArray: [],
        thirdContractExpiryDateArray: [],
        fourthContractExpiryDateArray: [],
        fifthContractExpiryDateArray: [],
        departureDateArray: [],
      },
      // 表单参数
      form: {
        outsource: '是',
        gender: '男'
      },
      // 表单校验
      rules: {

        jobNumber: [
          { required: true, message: "工号不能为空", trigger: "blur" }
        ],
        fullName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        idNumber: [
          { required: true, message: "身份证不能为空", trigger: "blur" }
        ],
        contactNumber: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        department: [
          { required: true, message: "部门不能为空", trigger: "blur" }
        ],
        position: [
          { required: true, message: "岗位不能为空", trigger: "change" }
        ],
        ethnicity: [
          { required: true, message: "名族不能为空", trigger: "change" }
        ],

      },
      // 部门树选项
      deptOptions: undefined,
      // 岗位选项
      postOptions: [],

      assignbuttonLoading: false,
      //床位
      assignform: {
        employeeIds: null,
        bedIds: null
      },
      // 弹出层标题
      assigntitle: "",
      // 是否显示弹出层
      assignopen: false,
      props: { multiple: true },
      options: [],
      optionsEthnicity: [
        { value: '汉族', label: '汉族' },
        { value: '蒙古族', label: '蒙古族' },
        { value: '回族', label: '回族' },
        { value: '藏族', label: '藏族' },
        { value: '维吾尔族', label: '维吾尔族' },
        { value: '苗族', label: '苗族' },
        { value: '彝族', label: '彝族' },
        { value: '壮族', label: '壮族' },
        { value: '布依族', label: '布依族' },
        { value: '朝鲜族', label: '朝鲜族' },
        { value: '满族', label: '满族' },
        { value: '侗族', label: '侗族' },
        { value: '瑶族', label: '瑶族' },
        { value: '白族', label: '白族' },
        { value: '土家族', label: '土家族' },
        { value: '哈尼族', label: '哈尼族' },
        { value: '哈萨克族', label: '哈萨克族' },
        { value: '傣族', label: '傣族' },
        { value: '黎族', label: '黎族' },
        { value: '傈僳族', label: '傈僳族' },
        { value: '佤族', label: '佤族' },
        { value: '畲族', label: '畲族' },
        { value: '高山族', label: '高山族' },
        { value: '拉祜族', label: '拉祜族' },
        { value: '水族', label: '水族' },
        { value: '东乡族', label: '东乡族' },
        { value: '纳西族', label: '纳西族' },
        { value: '景颇族', label: '景颇族' },
        { value: '柯尔克孜族', label: '柯尔克孜族' },
        { value: '土族', label: '土族' },
        { value: '达斡尔族', label: '达斡尔族' },
        { value: '仫佬族', label: '仫佬族' },
        { value: '羌族', label: '羌族' },
        { value: '布朗族', label: '布朗族' },
        { value: '撒拉族', label: '撒拉族' },
        { value: '毛南族', label: '毛南族' },
        { value: '仡佬族', label: '仡佬族' },
        { value: '锡伯族', label: '锡伯族' },
        { value: '阿昌族', label: '阿昌族' },
        { value: '普米族', label: '普米族' },
        { value: '塔吉克族', label: '塔吉克族' },
        { value: '怒族', label: '怒族' },
        { value: '乌孜别克族', label: '乌孜别克族' },
        { value: '俄罗斯族', label: '俄罗斯族' },
        { value: '鄂温克族', label: '鄂温克族' },
        { value: '德昂族', label: '德昂族' },
        { value: '保安族', label: '保安族' },
        { value: '裕固族', label: '裕固族' },
        { value: '京族', label: '京族' },
        { value: '塔塔尔族', label: '塔塔尔族' },
        { value: '独龙族', label: '独龙族' },
        { value: '鄂伦春族', label: '鄂伦春族' },
        { value: '赫哲族', label: '赫哲族' },
        { value: '门巴族', label: '门巴族' },
        { value: '珞巴族', label: '珞巴族' },
        { value: '基诺族', label: '基诺族' }
      ],
      activeName: 'first',
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/business/employee/importData2"
      },
      //员工列表数据
      dynamicData: [],
      detailopen: false,
      //高级搜索对话框
      advancedsearchOpen: false,
      restaurants: [
        { "value": "个人原因" },
        { "value": "退休"},
        { "value": "正常" },
      ],
      departureStatuList: [
        { "value": "正常离职" },
        { "value": "自离"},
        { "value": "退休" },
        { "value": "解除合同" },
      ],

    };
  },
  created() {
    this.getList();
    this.getDeptTree();
  },
  watch: {
    'form.idNumber': function (newVal, oldVal) {
      // 假设你有一个名为 `calculateAge` 的函数，用于从身份证号计算年龄
      this.form.age = this.GetAge(newVal);
    }
  },
  methods: {
    //头像上传成功
    uoloadSuccess(imgUrl) {
      this.form.avatar = imgUrl;
      this.form.img = imgUrl;
    },
    /** 查询员工列表 */
    getList() {
      this.loading = true;
      listEmployee(this.queryParams).then(response => {
        this.employeeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        jobNumber: undefined,
        fullName: undefined,
        department: undefined,
        position: null,
        outsource: '是',
        gender: '男',
        accommodation: '否',
        freeMeal: '不包吃',
        ethnicity: undefined,
        idNumber: undefined,
        homeAddress: undefined,
        residentialAddress: undefined,
        contactNumber: undefined,
        emergencyContactPerson: undefined,
        emergencyContactNumber: undefined,
        education: undefined,
        major: undefined,
        technicalTitle: undefined,
        entryDate: undefined,
        departureDate: undefined,
        departureStatus: undefined,
        departureReason: undefined,
        ruralMedicalInsurance: '是',
        insurancePacific: undefined,
        insuranceCpic: undefined,
        insuranceChinalife: undefined,
        socialInsurance: '是',
        insuranceStartDate: undefined,
        insuranceEndDate: undefined,
        waiveSocialInsurance: '是',
        housingFundStartDate: undefined,
        positionLevel: undefined,
        employeeRank: undefined,
        rankSalary: undefined,
        performanceLevel: undefined,
        performanceAmount: undefined,
        monthlyRent: undefined,
        skillSalary: undefined,
        taxSubsidy: undefined,
        remarks: undefined,
        firstContractExpiryDate: undefined,
        secondContractExpiryDate: undefined,
        thirdContractExpiryDate: undefined,
        fourthContractExpiryDate: undefined,
        fifthContractExpiryDate: undefined,
        contractRemarks: undefined,
        age: 0,
        roomNumber: undefined,
        jobchange: undefined,
        secondemployment: undefined,
        fujianmanage: '否',
        img: null,
      };
      //console.log(this.form)
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: null,
        isAsc: null,
        freeMeal: null,
        positionLevel: null,
        ruralMedicalInsurance: null,
        waiveSocialInsurance: null,
        delFlag: "0",
        outsource: "是",
        insurancePacific: null,
        insuranceCpic: null,
        insuranceChinalife: null,
        socialInsurance: null,
        entryDateArray: [],
        housingFundStartDateArray: [],
        insuranceStartDateArray: [],
        insuranceEndDateArray: [],
        firstContractExpiryDateArray: [],
        secondContractExpiryDateArray: [],
        thirdContractExpiryDateArray: [],
        fourthContractExpiryDateArray: [],
        fifthContractExpiryDateArray: [],
        departureDateArray: [],
        departureStatus: null,
        idNumber: null
      };
      this.queryParams.department = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      getUser().then((response) => {
        //岗位
        this.postOptions = response.data.posts;
      });
      this.open = true;
      this.title = "添加员工";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      getUser().then((response) => {
        //岗位
        this.postOptions = response.data.posts;
      });
      const id = row.id || this.ids
      getEmployee(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改员工";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateEmployee(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addEmployee(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除员工编号为"' + ids + '"的数据项？').then(() => {
        this.loading = true;
        return delEmployee(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('business/employee/export', {
        ...this.queryParams
      }, `employee_${new Date().getTime()}.xlsx`)
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        //console.log(response.data)
      });
    },
    DRHA_EFaultModeTree_handleSelect(node, instanceId) {
      this.form.department = node.label;
    },
    /** 分派宿舍按钮 */
    handleAssign() {
      const ids = this.ids;
      this.$modal.confirm('是否确提交数据？').then(() => {
        this.loading = true;
        allocated(ids).then((response) => {
          this.$modal.msgSuccess("提交成功");
          this.getList();
        })
          .finally(() => {

          });
      })
        .then(() => {

        })
        .catch(() => { })
        .finally(() => {
          this.loading = false;
        });
    },
    assigncancel() {
      this.assignform.bedIds = null,
        this.assignopen = false;
      //console.log(this.assignform);
    },
    /** 分派宿舍提交事件 */
    assignsubmitForm() {
      this.$refs["assignform"].validate(valid => {
        if (valid) {
          //this.assignbuttonLoading = true;

          assignDormitory(this.assignform).then(response => {
            this.$modal.msgSuccess("分派成功");
            this.assignopen = false;
            this.getList();
          }).finally(() => {
            this.assignbuttonLoading = false;
          });

        }
      });
    },
    //获取床位的tree树
    GetbedTree() {
      let data = { "outsource": "是" };
      getbedtree(data).then((response) => {
        this.options = response;
        //console.log(response)
      });
    },
    getAccommodationStyle(accommodation) {
      if (accommodation === '是') {
        return {
          color: 'green'
        };
      } else {
        return {
          color: 'red'
        };
      }
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "导入员工";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },

    // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值
    treeSelectInput(value, instanceId) {
      //console.log(value, 'input事件')
      if (value === undefined) {
        this.queryParams.department = null;
      }
      //console.log(this.value, 'this.value -- input') // 这个不需要 延迟
    },
    // 选中触发（清除值的时候不会触发）
    treeSelectChange(raw, instanceId) {
      //console.log(raw, '当前的对象')
      setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值
        // console.log(raw.label, 'this.value -- select')
        this.queryParams.department = raw.label;
      })
    },
    handleDetail(row) {
      getEmployee(row.id).then(response => {
        this.dynamicData[0] = response.data;
        this.detailopen = true;
      });
    },
    onPreview(row) {
      let pdfurl = "/profile/download/" + row.pdfurl;
      window.open(pdfurl);
    },
    /** 导出按钮操作 */
    handleExportpdf(row) {
      // 默认方法
      this.$download.name(row.pdfurl, false);
    },
    handleReadd(row) {
      const id = row.id;
      this.loading = true;
      reCreatPdf(id).then((response) => {
        this.$modal.msgSuccess("新生成成功");
        this.loading = false;
        this.getList();
      });
    },
    GetAge(identityCard) {
      var len = (identityCard + "").length;
      if (len == 0) {
        return 0;
      } else {
        if ((len != 15) && (len != 18))//身份证号码只能为15位或18位其它不合法
        {
          return 0;
        }
      }
      var strBirthday = "";
      if (len == 18)//处理18位的身份证号码从号码中得到生日和性别代码
      {
        strBirthday = identityCard.substr(6, 4) + "/" + identityCard.substr(10, 2) + "/" + identityCard.substr(12, 2);
      }
      if (len == 15) {
        strBirthday = "19" + identityCard.substr(6, 2) + "/" + identityCard.substr(8, 2) + "/" + identityCard.substr(10, 2);
      }
      //时间字符串里，必须是“/”
      var birthDate = new Date(strBirthday);
      var nowDateTime = new Date();
      var age = nowDateTime.getFullYear() - birthDate.getFullYear();
      //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
      if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
        age--;
      }
      return age;
    },
    //表格排序
    handleSortChange(column) {
      //获取字段名称和排序类型
      var fieldName = column.prop;
      if (fieldName === "createTime") {
        fieldName = "create_time";
      } else if (fieldName === "updateTime") {
        fieldName = "update_time";
      }
      else if (fieldName === "entryDate") {
        fieldName = "entry_date";
      }
      else if (fieldName === "departureDate") {
        fieldName = "departure_date";
      }
      this.queryParams.orderByColumn = fieldName;
      var sortingType = column.order;
      if (sortingType === "descending") {
        sortingType = "desc";
      } else {
        sortingType = "asc";
      }
      this.queryParams.isAsc = sortingType;
      this.handleQuery();
    },
    formatDate(dateString) {
      if (dateString) {
        return new Date(dateString).toLocaleDateString();
      } else {
        return '';
      }
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    departureStatusquerySearch(queryString, cb) {
      var restaurants = this.departureStatuList;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
  }
};
</script>
<style scoped>
.el-cascader-panel {
  height: 60vh;

  .el-scrollbar__wrap {
    height: 100%;
  }
}

.base-info-box {
  overflow: hidden;
}
</style>